import type { VxeTableGridOptions } from '@vben/plugins/vxe-table';

import { h } from 'vue';

import { IconifyIcon } from '@vben/icons';
import { setupVbenVxeTable, useVbenVxeGrid } from '@vben/plugins/vxe-table';

import { Button, Image } from 'ant-design-vue';
import { Folder, Menu as MenuIcon } from 'lucide-vue-next';

import { MenuType } from '#/api';

import { useVbenForm } from './form';

setupVbenVxeTable({
  configVxeTable: (vxeUI) => {
    vxeUI.setConfig({
      grid: {
        align: 'center',
        border: false,
        columnConfig: {
          resizable: true,
        },
        minHeight: 180,
        formConfig: {
          // 全局禁用vxe-table的表单配置，使用formOptions
          enabled: false,
        },
        proxyConfig: {
          autoLoad: true,
          response: {
            result: 'items',
            total: 'total',
            list: 'items',
          },
          showActiveMsg: true,
          showResponseMsg: false,
        },
        round: true,
        showOverflow: true,
        size: 'small',
      } as VxeTableGridOptions,
    });

    // 表格配置项可以用 cellRender: { name: 'CellImage' },
    vxeUI.renderer.add('CellImage', {
      renderTableDefault(_renderOpts, params) {
        const { column, row } = params;
        return h(Image, { src: row[column.field] });
      },
    });

    // 表格配置项可以用 cellRender: { name: 'CellLink' },
    vxeUI.renderer.add('CellLink', {
      renderTableDefault(renderOpts) {
        const { props } = renderOpts;
        return h(
          Button,
          { size: 'small', type: 'link' },
          { default: () => props?.text },
        );
      },
    });

    // 菜单名称渲染器（带图标）
    vxeUI.renderer.add('VxeRenderMenuName', {
      renderTableDefault(_renderOpts, params) {
        const { row } = params;
        const hasCustomIcon = row.icon && row.icon.trim() !== '';

        return h(
          'div',
          { class: 'flex items-center gap-2' },
          [
            // 图标渲染
            (() => {
              if (hasCustomIcon) {
                return h(IconifyIcon, {
                  icon: row.icon,
                  class: 'text-base',
                });
              }
              if (row.menuType === MenuType.DIRECTORY) {
                return h(Folder, { size: 16 });
              }
              if (row.menuType === MenuType.MENU) {
                return h(MenuIcon, { size: 16 });
              }
              return null;
            })(),
            // 菜单名称
            h('span', { class: 'font-medium' }, row.menuName),
          ].filter(Boolean),
        );
      },
    });

    // 这里可以自行扩展 vxe-table 的全局配置，比如自定义格式化
    // vxeUI.formats.add
  },
  useVbenForm,
});

export { useVbenVxeGrid };

export type * from '@vben/plugins/vxe-table';
